import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Image, Typography, Carousel, Alert } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './index.less';

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
// import styles from './index.less';

// 增加以下代码以使用"自动轮播"功能
import SwiperCore, { Pagination, Navigation } from 'swiper';
SwiperCore.use([Pagination, Navigation]);

const Index: React.FC = () => {

  return (
    <>
      <div className={styles.banner} />
      <div className={styles.culture}>
        <h1 className={styles.cultureTitle}>文化服务</h1>
        <Swiper
          loop={true}
          loopFillGroupWithBlank={true}
          slidesPerView={4}
          centeredSlides={true}
          spaceBetween={30}
          grabCursor={true}
          // pagination={{
          //   clickable: true,
          // }}
          className={styles.cultureSwiper}
        >
          <SwiperSlide className={styles.cultureItem}>
            <div className={styles.cultureItemInner}>
              <img src={'../xsg.png'}></img>
              <p className={styles.cultureItemName}>
                <span>校史馆</span>
              </p>
            </div>
          </SwiperSlide>
          <SwiperSlide className={styles.cultureItem}>
            <div className={styles.cultureItemInner}>
              <img src={'../bgt.png'}></img>
              <p className={styles.cultureItemName}>
                <span>报告厅</span>
              </p>
            </div>
          </SwiperSlide>
          <SwiperSlide className={styles.cultureItem}>
            <div className={styles.cultureItemInner}>
              <img src={'../cc.png'}></img>
              <p className={styles.cultureItemName}>
                <span>操场</span>
              </p>
            </div>
          </SwiperSlide>
          <SwiperSlide className={styles.cultureItem}>
            <div className={styles.cultureItemInner}>
              <img src={'../tyg.png'}></img>
              <p className={styles.cultureItemName}>
                <span>体育馆</span>
              </p>
            </div>
          </SwiperSlide>
          <SwiperSlide className={styles.cultureItem}>
            <div className={styles.cultureItemInner}>
              <img src={'../xshdzx.png'}></img>
              <p className={styles.cultureItemName}>
                <span>学生活动中心</span>
              </p>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>

      <div className={styles.network}>
        <div className={styles.section}>
          <p className={styles.networkTitle}>网络服务</p>
          <p className={styles.networkDes}>
            校园有线网覆盖校内所有办公区及家属区，无线网目前覆盖办公区和学生宿舍。教师需使用工号登录后方能访问校外网络资源，使用校园网访问校外网络资源按入流量收费。具体收费标准及服务内容可以查阅信息化用户服务平台或拨打服务热线咨询。教学区网络为无感知认证，即认证通过一次后，之后无需再进行认证，如需解绑电脑，通过自助服务删除电脑MAC地址。在本单位出现网络故障，需联系本单位网管。
          </p>
        </div>
      </div>

      <div className={styles.live}>
        <h1 className={styles.liveTitle}>生活服务</h1>
        <Swiper
          loop={true}
          loopFillGroupWithBlank={true}
          slidesPerView={3}
          centeredSlides={true}
          spaceBetween={20}
          grabCursor={true}
          className={styles.liveSwiper}
        >
          <SwiperSlide className={styles.liveSwipeSlide}>
            <div className={styles.liveItemInner}>
              <img src={'../st.png'}></img>
              <div className={styles.liveItemName}>食堂</div>
            </div>
          </SwiperSlide>
          <SwiperSlide className={styles.liveSwipeSlide}>
            <div className={styles.liveItemInner}>
              <img src={'../tsg.png'}></img>
              <div className={styles.liveItemName}>图书馆</div>
            </div>
          </SwiperSlide>
          <SwiperSlide className={styles.liveSwipeSlide}>
            <div className={styles.liveItemInner}>
              <img src={'../xyy.png'}></img>
              <div className={styles.liveItemName}>校医院</div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </>
  );
};

export default Index;
